<template>
	<!-- 群图片弹窗 -->
	<view class="group-img-window" v-if="showGroupImg">
		<view class="group-img-inner-window">
			<image src="../static/bg_shadow_buy_window.png" class="group-img-bg"></image>
			<text class="font-333-36" style="font-weight: 600;">加入企业微信群</text>
			<image :src="groupImg" class="code-img" :show-menu-by-longpress="true" @longpress="onLongPressedImg"></image>
			<text class="code-hint">长按上方二维码加入群聊</text>
			<text class="font-666-28" style="padding: 40rpx;" @click="showGroupImg = false">我知道了，稍后再加</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"groupImgWindow",
		data() {
			return {
				showGroupImg:false,
				groupImg:"",
			};
		},
		
		created() {
			this.groupImg = getApp().globalData.groupImg
			let that = this
			uni.$on("updateGroupInfo" , ()=>{
				that.groupImg = getApp().globalData.groupImg
			})
		},
		
		methods:{
			onLongPressedImg(){
				let that = this
				this.http({
					url:'/common/platform/joinPlatform',
					method:'POST',
					data:{
						id:getApp().globalData.groupId
					},
					success(res){
						if (res.code == 200){
						}
					},
					failed(e){
					}
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.group-img-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.group-img-inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 148rpx);
			padding-top: 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.group-img-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.code-img{
				width: 327rpx;
				height: 338rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
			}
			
			.code-hint{
				background: rgba(255, 209, 0, 0.2);
				border-radius: 10rpx;
				padding: 20rpx 30rpx;
				color: #333333;
				font-weight: 600;
				font-size: 28rpx;
			}
			
		}
	}
</style>